<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div class="page-header-content">
        <div>
          <a-page-header
            :ghost="false"
            title="班级签到详情"
            @back="() => $router.go(-1)"
          >
            <template slot="extra">
              <a-button type="primary" @click="modelOpen = true;form.signFlag = true;form.title = '签到'">
                签到
              </a-button>
              <a-button type="primary" @click="modelOpen = true;form.signFlag = false;form.title = '班级信息修改'">
                班级信息修改
              </a-button>
            </template>
            <a-descriptions >
              <a-descriptions-item label="班级分类">
                {{scheduleInfo.scheduleType == 'A' ? '普通班' : '一对一私教'}}
              </a-descriptions-item>
              <a-descriptions-item label="所属校区">
                {{scheduleInfo.deptName}}
              </a-descriptions-item>
              <a-descriptions-item label="教务">
                {{scheduleInfo.customerName}}
              </a-descriptions-item>
              <a-descriptions-item label="上课日期">
                {{scheduleInfo.scheduleDate}}
              </a-descriptions-item>
              <a-descriptions-item label="上课时间段">
                {{scheduleInfo.start + '-' + scheduleInfo.end}}
              </a-descriptions-item>
              <a-descriptions-item label="上课总人数">
                {{scheduleInfo.studentCount}}
              </a-descriptions-item>
            </a-descriptions>
          </a-page-header>
        </div>
      </div>
    </template>
    <a-card :bordered="false">
      <a-divider orientation="left">
        教练签到信息
      </a-divider>
      <a-row >
        <a-col :span="5" v-for="item in teacher">
          <a-card hoverable style="width: 300px">
            <template slot="actions" class="ant-card-actions">
              <a-icon key="setting" type="delete" @click="handleDelete(item)"/>
            </template>
            <a-card-meta :title="item.userName" :description="item.type == 'A' ? '主教练' : '助教'">
              <a-avatar slot="avatar" style="color: white; backgroundColor: #1890ff" size="large">
                {{ item.userName.substr(item.userName.length - 1) }}
              </a-avatar>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>

      <a-divider orientation="left">
        学员签到信息
      </a-divider>
      <!-- 数据展示 -->
      <a-table
        :loading="loading"
        rowKey="id"
        :columns="studentColumns"
        :data-source="student"
        :pagination="false"
        :bordered="tableBordered"
      >
        <span slot="operation" slot-scope="text, record">
          <a-divider type="vertical" v-hasPermi="['manager:userSchedule:remove']" />
          <a @click="handleDelete(record)" v-hasPermi="['manager:userSchedule:remove']">
            <a-icon type="delete" />删除
          </a>
        </span>
      </a-table>
    </a-card>
    <a-modal :visible="modelOpen" :title="form.title" @cancel="modelOpen = false" @ok="modifySchedule" width="1000px">
      <a-form-model ref="form" :model="form">
        <a-form-model-item label="起止时间" v-if="!form.signFlag">
            <a-time-picker placeholder="开始时间" format="HH:mm" v-model="form.start" valueFormat="HH:mm"/>~
            <a-time-picker placeholder="结束时间" format="HH:mm" v-model="form.end" valueFormat="HH:mm"/>
        </a-form-model-item>
        <template  v-if="form.signFlag">
          <a-form-model-item label="类型" >
            <a-radio-group v-model="form.type" button-style="solid">
                <a-radio-button v-for="(d, index) in typeOptions" :key="index" :value="d.value">{{ d.name }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="姓名" >
            <a-row>
              <a-col :span="10">
                <a-input v-model="form.name"></a-input>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="5">
                <a-button type="primary" @click="selectUserInfo()">查询</a-button>
              </a-col>
            </a-row>
          </a-form-model-item>
          <a-form-item>
            <a-row type="flex">
              <a-col :span="15" v-for="item in userList">
                <a-card hoverable style="width: 300px" @click="goSing(item.id)">
                  <a-card-meta :title="item.name" :description="item.deptName + '(' + item.phone +  ')'">
                    <a-avatar slot="avatar" style="color: white; backgroundColor: #1890ff" size="large">
                      {{ item.name.substr(item.name.length - 1) }} 
                    </a-avatar>
                  </a-card-meta>
                </a-card>
              </a-col>
            </a-row>
          </a-form-item>
        </template>
        
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
  
</template>

<script>
import { listUserSchedule, delUserSchedule,getUserInfo,sign} from '@/api/manager/userSchedule'
import {updateSchedule} from '@/api/manager/schedule'
import CreateForm from './modules/CreateForm'
import { tableMixin } from '@/store/table-mixin'

export default {
  name: 'UserSchedule',
  components: {
    CreateForm
  },
  mixins: [tableMixin],
  data () {
    return {
      userList:[],
      typeOptions:[
        {name:'教练',value:'A'},
        {name:'助教',value:'C'},
        {name:'学员',value:'B'},
      ],
      modelOpen:false,
      form:{
        title:'',
        signFlag:false,
        deptId:0,
        start:null,
        end:null,
        id:null,
        type:null,
        name:null,
      },
      scheduleInfo:{},
      teacher:[],
      student:[],
      list: [],
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      loading: false,
      total: 0,
      // 查询参数
      queryParam: {
        scheduleId: null,
        userId: null,
        cardId: null,
        type: null,
        deptId: null,
        pageNum: 1,
        pageSize: 10
      },
      studentColumns: [
        {
          title: '学生名称',
          dataIndex: 'userName',
          ellipsis: true,
          align: 'center'
        },{
          title: '卡包名称',
          dataIndex: 'cardName',
          ellipsis: true,
          align: 'center'
        },{
          title: '卡号',
          dataIndex: 'cardNo',
          ellipsis: true,
          align: 'center'
        },{
          title: '有效期',
          dataIndex: 'validity',
          ellipsis: true,
          align: 'center'
        },{
          title: '剩余数量',
          dataIndex: 'cardCount',
          ellipsis: true,
          align: 'center'
        },{
          title: '操作',
          dataIndex: 'operation',
          width: '18%',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ],
    }
  },
  filters: {
  },
  created () {
    this.queryParam.scheduleId = this.$route.query.scheduleId;
    this.queryParam.deptId = this.$route.query.deptId;
    this.form.deptId = this.$route.query.deptId;
    this.getList()
  },
  computed: {
  },
  watch: {
  },
  methods: {
    goSing(userId){
      this.form.scheduleId = this.scheduleInfo.id;
      this.form.userId = userId;
      sign(this.form).then(resp => {
        if(resp.code == '200'){
          this.$message.success('签到成功！',)
          this.userList == null;
          this.getList();
        }else{
          this.$message.error(resp.msg);
        }
      })
    },
    selectUserInfo(){
      if(!this.form.name){
        this.$message.error('请填写姓名！')
        return ;
      }if(!this.form.type){
        this.$message.error('请选择类型！')
        return ;
      }
      getUserInfo(this.form).then(resp => {
        this.userList = resp.data;
        if(this.userList == null || this.userList.length == 0){
          this.$message.error('查询结果为空！')
        }
      });
    },
    modifySchedule(){
      if(this.form.signFlag){
        this.modelOpen = false
      }else{
        this.form.id = this.queryParam.scheduleId;
        this.form.deptId = this.queryParam.deptId
        updateSchedule(this.form).then(response => {
          this.$message.success(
            '修改成功',
            3
          )
          this.modelOpen = false
          this.getList()
          this.$emit('ok')
        })
      }
    },
    /** 查询教练或者学生的上课签到信息列表 */
    getList () {
      this.loading = true
      listUserSchedule(this.queryParam).then(response => {
        this.scheduleInfo = response.data.scheduleInfo;
        this.teacher = response.data.teacher;
        this.student = response.data.student;
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParam.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParam = {
        scheduleId: undefined,
        userId: undefined,
        cardId: undefined,
        type: undefined,
        deptId: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.id)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      var that = this
      const ids = row.id
      this.$confirm({
        title: '确认删除所选中数据?',
        onOk () {
          return delUserSchedule(ids)
            .then(() => {
              that.onSelectChange([], [])
              that.getList()
              that.$message.success(
                '删除成功',
                3
              )
          })
        },
        onCancel () {}
      })
    },
    /** 导出按钮操作 */
    handleExport () {
      var that = this
      this.$confirm({
        title: '是否确认导出?',
        content: '此操作将导出当前条件下所有数据而非选中数据',
        onOk () {
          that.download('manager/userSchedule/export', {
            ...that.queryParam
          }, `userSchedule_${new Date().getTime()}.xlsx`)
        },
        onCancel () {}
      })
    }
  }
}
</script>
